<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CallKit 通话演示（支持URL登录）</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            background: #f5f5f5;
        }

        .demo-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #1a73e8;
            margin: 0 0 10px 0;
        }

        .header p {
            color: #666;
            margin: 0;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #1a73e8;
        }

        .feature-card h3 {
            margin: 0 0 10px 0;
            color: #1a73e8;
        }

        .feature-card p {
            margin: 0;
            color: #666;
            line-height: 1.5;
        }

        .demo-area {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .code-block {
            background: #f1f3f4;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
        }

        .migration-note {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 15px;
            margin-top: 20px;
        }

        .migration-note h3 {
            color: #856404;
            margin: 0 0 10px 0;
        }

        .migration-note p {
            color: #856404;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="demo-container">
        <div class="header">
            <h1>CallKit 通话演示（支持URL登录）</h1>
            <p>展示CallKit的全自动配置功能和URL参数登录</p>
        </div>

        <div class="features">
            <div class="feature-card">
                <h3>🔗 URL参数登录</h3>
                <p>支持通过URL参数直接登录，无需手动输入账号信息</p>
            </div>
            <div class="feature-card">
                <h3>📝 登录表单</h3>
                <p>提供友好的登录界面，支持手动输入登录信息</p>
            </div>
            <div class="feature-card">
                <h3>🚀 全自动配置</h3>
                <p>callId、channel、token等参数全部自动生成</p>
            </div>
            <div class="feature-card">
                <h3>🎯 极简使用</h3>
                <p>只需要提供目标用户即可开始通话</p>
            </div>
        </div>

        <div class="demo-area">
            <h2>演示区域</h2>
            <div id="demo-root"></div>
        </div>

        <div
            style="background: #e8f5e8; border: 1px solid #b7e4b7; border-radius: 6px; padding: 15px; margin-top: 20px;">
            <h3 style="color: #2d5a2d; margin: 0 0 10px 0;">🔗 URL参数登录示例</h3>
            <p style="color: #2d5a2d; margin: 5px 0;">您可以在URL中添加以下参数来实现自动登录：</p>
            <p style="color: #2d5a2d; margin: 5px 0;"><strong>完整示例：</strong></p>
            <p style="color: #2d5a2d; margin: 5px 0;"><code
                    style="background: #fff; padding: 5px 8px; border-radius: 3px; font-size: 13px; color: #d73a49;">?userId=your_user_id&password=your_password&appKey=your_app_key</code>
            </p>
            <p style="color: #2d5a2d; margin: 5px 0;"><strong>各参数说明：</strong></p>
            <ul style="color: #2d5a2d;">
                <li><code style="background: #fff; padding: 2px 4px; border-radius: 3px; color: #d73a49;">userId</code>
                    - 您的用户ID</li>
                <li><code
                        style="background: #fff; padding: 2px 4px; border-radius: 3px; color: #d73a49;">password</code>
                    - 您的密码</li>
                <li><code style="background: #fff; padding: 2px 4px; border-radius: 3px; color: #d73a49;">appKey</code>
                    - 应用的AppKey</li>
            </ul>
            <p style="color: #2d5a2d; margin: 5px 0;"><strong>使用方式：</strong></p>
            <p style="color: #2d5a2d; margin: 5px 0;">1. 直接在浏览器地址栏添加参数</p>
            <p style="color: #2d5a2d; margin: 5px 0;">2. 在登录表单中填写信息后点击"更新URL参数"</p>
        </div>

        <div class="migration-note">
            <h3>📋 功能说明</h3>
            <p>
                此版本支持URL参数登录和表单登录两种方式。登录成功后可以体验完整的CallKit通话功能，
                包括一对一通话和群组通话。所有通话参数都会自动生成，用户只需要输入目标用户即可开始通话。
            </p>
        </div>


    </div>

    <script type="module" src="call-demo.tsx"></script>
</body>

</html>